import React, { Component } from 'react';
import '../案例练习作业/4.1发表评论.css'
class fabiao extends Component {

  state = { 
    title:'',//联系人
    count:'',//评论内容
    list:[
      {
        title:'小明',
        count:"你好楼主"
      }
    ]
   }


  //  评论人
  pinlun = (e)=>{
    console.log(e.target.value);
    this.setState({
      title:e.target.value
    })
  }

  // 内容
  neirong = (e)=>{
    console.log(e.target.value);
    this.setState({
      count:e.target.value
    })
  }

  // 点击发表
  fabiao =()=>{
    let {title,count} = this.state                    // 1.把数据解构出来
    let Aerr = this.state.list.concat([{title,count}])// 2.把数据合并到list里边
    this.setState({                                   // 3.把合并的新数组赋值给list
      list:Aerr
    })
  }

  // 点击删除一条
  del = (index) => {
    // console.log(e);
    this.state.list.splice(index,1)
    this.setState({
      list:this.state.list
    })
  }

  
  render() { 
    return ( 
      <>
        <div className='root'>
          {/* 输入评论人 */}
          <div className='inpu'>
            <input className='inpu1'value={this.state.title} onChange={this.pinlun} type="text" placeholder='请输入评论人' />
          </div>

          {/* 评论内容 */}
          <div className=''>
            <textarea name="" id="" cols="50" rows="10" placeholder='请输入评论内容' value={this.state.count} 
            onChange={this.neirong} />
          </div>

          {/* 发表评论 */}
          <button onClick={this.fabiao}>发表评论</button>

          {/* 评论区 */}
          <ul>
            {
              this.state.list.map((item,index)=>{
                return <li key={index}>
                        <span className='span'>评论人：{item.title}</span>
                        <div className='fu'>
                          <div className='spa2'>评论内容：{item.count}</div>
                          <button className='butt' onClick={()=>this.del(index)}>删除评论</button>
                        </div>
                       </li>
              })
            }
          </ul>

        </div>
      </>
     );
  }




  // // 评论人
  // pinglun = (e)=>{
  //   console.log(e.target.value);
  //   this.setState({
  //     title:e.target.value
  //   })
  // }

  // // 内容
  // neirong = (e)=>{
  //   this.setState({
  //     count:e.target.value
  //   })
  // }

  // // 点击发表
  // fabiao = ()=>{
  //   let {title,count} = this.state //解构
  //   let Aerr = this.state.list.concat([{title,count}]) //concat合并成新数组
  //   this.setState({ //把新数组赋值给list
  //     list:Aerr
  //   })
  // }

  // // 点击删除
  // del = (index) =>{
  //   this.state.list.splice(index,1)
  //   this.setState({
  //     list: this.state.list
  //   })
  // }


  // render() { 
  //   return ( 
  //     <>
  //       <div className='root'>
  //         {/* 输入评论人 */}
  //         <div className='inpu'>
  //           <input type="text" placeholder='请输入评论人' value={this.state.title} onChange={this.pinglun}/>
  //         </div>

  //         {/* 评论内容 */}
  //         <div className=''>
  //           <textarea name="" id="" cols="50" rows="10" placeholder='请输入评论内容' value={this.state.count}
  //           onChange={this.neirong} />
  //         </div>

  //         {/* 发表评论 */}
  //         <button onClick={this.fabiao}>发表评论</button>

  //         {/* 评论区 */}
  //         <ul>
  //           {
  //             this.state.list.map((item,index)=>{
  //               return <li key={index}>
  //                         <span className='span'>评论人：{item.title}</span>
  //                         <div className='fu'>
  //                           <div className='spa2'>评论内容：{item.count}</div>
  //                           <button className='butt' onClick={()=>{this.del(index)}}>删除评论</button>
  //                         </div>
  //                      </li>
  //             })
  //           }
  //         </ul>

  //       </div>
  //     </>
  //    );
  // }







}
 
export default fabiao;